<template>
  <div
    class="
      border border-gray-200 border-solid
      rounded
      w-96
      p-8
      shadow-lg
      mt-[15vh]
      mx-auto
    "
  >
    <div class="text-center">
      <img src="../../assets/logo.png" class="w-16" alt="" />
      <div class="text-3xl font-bold">Sign in</div>
      <div class="text-sm mt-2">
        Embrace SmartLight, <br />one tap to save the energy
      </div>
    </div>

    <el-form
      ref="loginForm"
      :model="form"
      :rules="rules"
      label-position="top"
      class="mt-6"
    >
      <el-form-item label="Username or email" prop="email">
        <el-input
          class="rounded-full"
          type="text"
          prefix-icon="el-icon-message"
          placeholder="Enter Email"
          v-model="form.email"
        />
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          placeholder="Enter Password"
          v-model="form.password"
        />
      </el-form-item>

      <!-- <el-form-item>
        <span class="flex justify-between items-center">
          <el-checkbox v-model="checked">Remember me</el-checkbox>
          <el-link type="primary">Forget the Password</el-link>
        </span>
      </el-form-item> -->

      <el-form-item class="mt-8">
        <el-button
          class="!px-8 !tracking-widest"
          type="primary"
          round
          v-on:click="onSubmit('loginForm')"
          >Sign in</el-button
        >
      </el-form-item>

      <el-divider></el-divider>

      <div class="text-sm -mt-2 flex items-center">
        <span> No account? </span>
        <el-link class="ml-2" type="primary" @click="$router.push('/reg')"
          >Create a free account</el-link
        >
      </div>
      <div>
        <el-link type="primary" @click="$router.push('/reset-password')"
          >Forget the Password</el-link
        >
      </div>
    </el-form>
  </div>
</template>
  
  <script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        email: "",
        password: "",
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        email: [{ required: true, trigger: "blur" }],
        password: [{ required: true, trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          //   this.$router.push("/main");
        }
      });
    },
  },
};
</script>
  
  <style scoped>
</style>
  